import Link from "next/link";
import { Input, Row, Col, Menu } from "antd";
const { Search } = Input;
import { MenuOutlined, CloseOutlined } from "@ant-design/icons";
import { useEffect, useState } from "react";
import { useRouter } from 'next/router';
import styles from './Nav.module.scss';
import Container from "../Container/Container";
const { SubMenu } = Menu;
export default function Nav(props) {
  const [show, setShow] = useState(false);
  const router = useRouter();;
  const toSearch = (e) => {
    console.log('e', e)
    router.push(`category/0_0/_${e}`)

  }
  const navData = useState([{

  }])
  const clickMenu = (e) => {
    console.log('e', e)
  }
  return (
    <nav className={styles.nav}>
      <Container>
        <Menu mode="horizontal" onClick={clickMenu}>
          {
            props.navData.map(item => {
              return (
                item.children ? <SubMenu key={item.id} title={item.cateEnName} >
                  {
                    item.children.map(items => {
                      return <Menu.Item key={items.id}>
                        <Link href={`/category/${items.pid}_${items.id}`}>
                          <a>{items.cateEnName}</a>
                        </Link>

                      </Menu.Item>
                    })
                  }

                </SubMenu> : <Menu.Item key={item.id} >
                  {item.name}
                </Menu.Item>
              )
            })
          }

          <SubMenu title="ACTIVITY" key="ACTIVITY">
            <Menu.Item key='YOGA'>
              <Link href={`/category/0_0_sort:yoga`}>
                <a>YOGA</a>
              </Link>
            </Menu.Item>
            <Menu.Item key='RUNNING'>
              <Link href={`/category/0_0_sort:running`}>
                <a>RUNNING</a>
              </Link>
            </Menu.Item>
            <Menu.Item key='CASUAL'>
              <Link href={`/category/0_0_sort:casual`}>
                <a>CASUAL</a>
              </Link>
            </Menu.Item>
            <Menu.Item key='WORKOUT'>
              <Link href={`/category/0_0_sort:workout`}>
                <a>WORKOUT</a>
              </Link>
            </Menu.Item>
          </SubMenu>
          <Menu.Item key='NEW ARRIVALS'>
            <Link href={`/category/0_0_sort:a`}>
              <a>NEW ARRIVALS</a>
            </Link>
          </Menu.Item>
          <Menu.Item key='BESTSELLERS'>
            <Link href={`/category/0_0_sort:b`}>
              <a>BESTSELLERS</a>
            </Link>
          </Menu.Item>
          <SubMenu title="ABOUT US" key="ABOUT US" >
            <Menu.Item key='Our Story'>
              <Link href={`/page/12`}>
                <a>Our Story</a>
              </Link>
            </Menu.Item>
            <Menu.Item key='About Ninamoka'>
              <Link href={`/page/11`}>
                <a style={{ textAligin: 'left' }}>About Ninamoka</a>
              </Link>
            </Menu.Item>
          </SubMenu>
        </Menu>
      </Container>
      <div className={show ? "mobile-menu show" : "mobile-menu"}>
        <div className="mobile-menu-header">
          <CloseOutlined onClick={() => setShow(false)} style={{ fontSize: '20px' }} />
        </div>
        <div className="mobile-menu-content">
          <ul className="mobile-nav">
            {props.navData.map((item, index) => {
              return (
                <li className="mobile-nav-list" key={index}>
                  <Link href={`/category/${item.id}_0`}>
                    <a className={props.current && props.current.indexOf(item.id) !== -1 ? "active parent" : "parent"}>{item.cateEnName}</a>
                  </Link>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
      {show && <div className="nav-mask" onClick={() => setShow(false)}></div>}
    </nav>
  );
}
